<template>
  <div class="container">
    <div class="panel">
      <ul class="tabs">
        <li
          v-for="(item, index) in tabsData"
          :key="index"
          @click="clickTabs(item)"
        >
          <span
            :class="{
              active: tabsDataActive === index,
              disabled: item.use === false,
            }"
            :title="item.name"
            >{{ item.name }}</span
          >
        </li>
      </ul>
      <div class="search-wrap">
        <el-input
          size=""
          suffix-icon="el-icon-search"
          placeholder="请输入检索关键词"
          v-model="searchTxt"
          @change="search"
          @keydown.enter.native="search"
        ></el-input>
      </div>
      <!-- 辐射图组件 -->
      <Technology
        ref="technology"
        @clickNode="clickNode"
        @canvasClick="canvasClick"
        :tabsDataItem="tabsDataItem"
        @getCenterNode="getCenterNode"
      />
      <!-- 组件 -->
      <infoDialog
        :infoDataCompanyList="infoDataCompanyList"
        :infoDataPersonnelList="infoDataPersonnelList"
        @handleShowBox="handleshowInfoDialog"
        :showInfoDialog="showInfoDialog"
        :clickNodeId="clickNodeId"
        :currentNodeName="currentNodeName"
      />
    </div>
  </div>
</template>
<script>
import Technology from "./graph/Technology";
import infoDialog from "./child/infoDialog";
export default {
  components: {
    Technology,
    infoDialog,
  },
  data() {
    return {
      tabsData: [],
      tabsDataActive: 0,
      tabsDataItem: {},
      searchTxt: "",
      showInfoDialog: false,
      infoDataCompanyList: [],
      infoDataPersonnelList: [],
      mCenterNode: {},
      clickNodeId: "", //当前点击node
      currentNodeName:'',
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    '$route'() {
      this.init()
    }
  },
  methods: {
    init() {
      this.tabsData = [
        {
          name: "风能",
          code: "0",
          use: true,
        },
        // {
        //   name: "光伏",
        //   code: "0",
        //   use: true,
        // },
        {
          name: "氢能",
          code: "0",
          use: true,
        },
        // {
        //   name: "双碳",
        //   code: "0",
        //   use: true,
        // },
      ];
      let router = this.$route
      let label = router.query.label

      if(label && label == '风能'){
        this.tabsDataActive = 0;
        this.tabsDataItem = {
          name: "风能",
          code: "0",
          use: true,
        };
      }else if(label && label == '氢能'){
        this.tabsDataActive = 1;
        this.tabsDataItem = {
          name: "氢能",
          code: "0",
          use: true,
        };
      }
      this.$refs.technology.getAllData(this.tabsDataItem);
    },
    clickTabs(item) {
      let nodeMenu = document.getElementById("nodeContextMenu");
        nodeMenu.style.display = "none";
      this.tabsData.map((val, index) => {
        if (val.name === item.name) {
          this.tabsDataActive = index;
          this.tabsDataItem = val;
          this.$refs.technology.getAllData(this.tabsDataItem);
        }
      });
    },
    clickNode(item) {
      this.clickNodeId = item._cfg.id;
      this.currentNodeName = item._cfg.model.label;
      this.getCompaniesAuthor({ id: item._cfg.id },true);
    },
    search() {
      this.tabsDataItem = {
        name: this.searchTxt,
        code: "0",
        use: true,
      };
      this.$refs.technology.getAllData(this.tabsDataItem);
    },
    canvasClick() {
      let nodeMenu = document.getElementById("nodeContextMenu");
      nodeMenu.style.display = "none";
      this.showInfoDialog = false;
    },
    handleshowInfoDialog(val) {
      this.showInfoDialog = val;
    },
    //获取关联人才及公司 弹窗中数据
    getCompaniesAuthor(item,showInfoDialog) {
      this.$get(this.$Url.technology.companiesAndPersonnelList, {
        id: item.id,
        // id: 2495711,
        size: 5,
      }).then(( res ) => {
        if(res.data){
          this.showInfoDialog = showInfoDialog;
          this.infoData = res.data;
          this.infoDataCompanyList = res.data.rel_ann;
          this.getCompanyById(item.id);
        }else{
          this.$message({
            message:'暂无数据',
            type:'warning'
          })
        }
      });
    },
    //根据id取出关联公司信息
    getCompanyById(id) {
      let params = {
        id: id,
        size: 6,
        pageSize:6,
        pageNum:1,
      };
      // this.$get(this.$Url.technology.getAuthorInfoById, {
      //   id: id,
      //   // id: 'e33b688a-0d30-11eb-b8c5-52540092b98a',
      // })
      this.$get(this.$Url.technology.personnelList, params)
      .then((res) => {
        if (res.data) {
          let data = res.data;
          if(data.result && data.result.length > 0){
            this.infoDataPersonnelList = data.result;
          }else{
            this.infoDataPersonnelList = [];
          }
        }
      });
    },







//查人才列表
    // searchPersonnelList() {
    //   this.emptyText = "数据加载中...";
    //   let params = {
    //     id: this.targetId,
    //     size: 1000,
    //     pageSize:12,
    //     pageNum:this.pagePersonIndex,
    //   };
    //   this.$get(this.$Url.technology.personnelList, params)
    //     .then(( res ) => {
    //       let data = res.data;
    //       this.totalPerson = data.total;
    //       if (data.result && data.result.length > 0) {
    //         this.noDataPer = false
    //         this.personlData = data.result ;
    //       } else {
    //         this.emptyText = "暂无数据";
    //         this.noDataPer = true
    //       }
    //     })
    //     .catch((e) => {
    //       this.emptyText = "暂无数据";
    //       this.noDataPer = true
    //     });
    // },









    //获取中心点
    getCenterNode(item) {
      if(item){
        this.mCenterNode = item;
        this.currentNodeName = item.label;
        this.clickNodeId = item.id;
        this.getCompaniesAuthor(item,false);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  height: 100%;
  .panel {
    position: relative;
    width: 100%;
    height: 800px;
    margin-bottom: 20px;
    background-color: #fff;
    overflow: auto;
    display: flex;
    .tabs {
      position: fixed;
      left: 0;
      padding: 20px 20px 0;
      list-style: none;
      width: 170px;
      z-index: 10;
      li {
        width: 130px;
        height: 32px;
        min-width: 0;
        margin-bottom: 16px;
        background-color: #fff;
        span {
          display: inline-block;
          width: 100%;
          height: 100%;
          line-height: 32px;
          border: 1px solid #524cab;
          border-radius: 16px;
          box-sizing: content-box;
          text-align: center;
          font-size: 13px;
          color: #524cab;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &.active {
            color: #fff;
            background-color: #524cab;
          }
          &.disabled {
            color: #fff;
            background-color: #eee;
            border-color: #eee;
          }
        }
      }
    }
  }
  .panel2 {
    position: relative;
    width: 100%;
    background: #fff;
    padding-bottom: 20px;
  }
}

</style>
<style>
.search-wrap {
  position: absolute;
  top: 0;
  left: 180px;
  height: 50px;
  padding-top: 20px;
  z-index: 9;
}
.search-wrap .el-input__icon {
  color: #524cab;
  font-weight: bold;
}
.search-wrap .el-input__suffix {
  display: inline-block;
  padding-top: 8px;
}
.search-wrap .el-input__suffix-inner {
  border-left: 1px solid #dcdfe6;
  padding: 0 5px;
}
.search-wrap .el-input__icon {
  line-height: 0;
}
</style>